<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" :src="request.baseURL + userInfo.user_avatar_img || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				<view class="info-content">
					<text class="username">{{ userInfo.name || '未设置昵称' }}</text>
					<text class="phone" @click="copyPhone(userInfo.phone)">
						{{ formatPhone(userInfo.phone) }}
						<text class="copy-tip">(点击复制)</text>
					</text>
				</view>
			</view>
		</view>

		<!-- 加载中的骨架屏 -->
		<template v-if="loading">
			<view class="menu-list">
				<view class="skeleton-user-card"></view>
				<view class="menu-group">
					<view class="skeleton-bar" v-for="i in 3" :key="i"></view>
				</view>
				<view class="menu-group">
					<view class="skeleton-bar" v-for="i in 2" :key="i"></view>
				</view>
			</view>
		</template>
		
		<template v-else>
			<view class="menu-list">
				<view class="menu-group">
					<view class="menu-item" @click="handleChangePassword">
						<text class="title">修改密码</text>
						<text class="arrow">></text>
					</view>
				</view>
				
				<view class="menu-group">
					<view class="menu-item" @click="clearCache">
						<text class="title">清除缓存</text>
						<text class="value">{{ cacheSize }}</text>
					</view>
					<view class="menu-item">
						<text class="title">当前版本</text>
						<text class="value">{{ version }}</text>
					</view>
				</view>
			</view>
		</template>
		
		<button class="logout-btn" @click="handleLogout">退出登录</button>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { STORAGE_KEY } from '@/common/config.js'
import request from "@/common/request.js"
const loading = ref(true)
const settings = ref({
	notification: true,
	fingerprint: false
})

const cacheSize = ref('0KB')
const version = ref(STORAGE_KEY.VERSION)
const userInfo = ref({})

// 格式化手机号
const formatPhone = (phone) => {
	if (!phone) return '未绑定手机号'
	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 计算缓存大小
const calculateCacheSize = () => {
	let totalSize = 0
	
	// 遍历所有存储的key
	const allKeys = Object.values(STORAGE_KEY)
	allKeys.forEach(key => {
		const data = uni.getStorageSync(key)
		if (data) {
			// 计算字符串占用的字节数
			totalSize += new Blob([data]).size
		}
	})
	
	// 转换为合适的单位
	if (totalSize < 1024) {
		cacheSize.value = totalSize + 'B'
	} else if (totalSize < 1024 * 1024) {
		cacheSize.value = (totalSize / 1024).toFixed(2) + 'KB'
	} else {
		cacheSize.value = (totalSize / (1024 * 1024)).toFixed(2) + 'MB'
	}
}

// 清除缓存
const clearCache = () => {
	uni.showModal({
		title: '提示',
		content: '确定要清除缓存吗？',
		success: (res) => {
			if (res.confirm) {
				// 遍历清除所���缓存，但保留登录信息
				const allKeys = Object.values(STORAGE_KEY)
				allKeys.forEach(key => {
					if (key !== STORAGE_KEY.USER_INFO && key !== STORAGE_KEY.TOKEN) {
						uni.removeStorageSync(key)
					}
				})
				
				// 重新计算缓存大小
				calculateCacheSize()
				
				uni.showToast({
					title: '清除成功',
					icon: 'success'
				})
			}
		}
	})
}

const handleNotificationChange = (e) => {
	settings.value.notification = e.detail.value
}

const handleFingerprintChange = (e) => {
	settings.value.fingerprint = e.detail.value
}

const handleChangePassword = () => {
	uni.navigateTo({
		url:"/pages/user/security"
	})
}

const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				// 清除所有缓存
				const allKeys = Object.values(STORAGE_KEY)
				allKeys.forEach(key => {
					uni.removeStorageSync(key)
				})
				
				uni.showToast({
					title: '退出成功',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}, 1500)
			}
		}
	})
}

// 复制手机号
const copyPhone = (phone) => {
	if (!phone) {
		uni.showToast({
			title: '暂无手机号',
			icon: 'none'
		})
		return
	}
	
	uni.setClipboardData({
		data: phone,
		success: () => {
			uni.showToast({
				title: '手机号已复制',
				icon: 'success'
			})
		}
	})
}

onMounted(() => {
	// 模拟加载延迟
	setTimeout(() => {
		// 加载用户信息
		const storageUserInfo = uni.getStorageSync(STORAGE_KEY.USER_INFO)
		if (storageUserInfo) {
			userInfo.value = JSON.parse(storageUserInfo)
		}
		
		// 加载设置
		const storageSettings = uni.getStorageSync(STORAGE_KEY.SETTINGS)
		if (storageSettings) {
			settings.value = JSON.parse(storageSettings)
		}
		// 计算缓存大小
		calculateCacheSize()
		loading.value = false
	}, 1000)
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 20rpx;
}

.user-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.user-info {
		display: flex;
		align-items: center;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-right: 20rpx;
			background-color: #f5f5f5;
		}
		
		.info-content {
			flex: 1;
			
			.username {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}
			
			.phone {
				font-size: 28rpx;
				color: #999;
				display: flex;
				align-items: center;
				gap: 10rpx;
				
				.copy-tip {
					font-size: 24rpx;
					color: #4A90E2;
					opacity: 0.8;
				}
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
}

/* 骨架屏样式 */
.skeleton-user-card {
	height: 180rpx;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}

.menu-list {
	.menu-group {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		
		.menu-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			
			&:last-child {
				border-bottom: none;
			}
			
			.title {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.value {
				font-size: 28rpx;
				color: #999;
			}
			
			.arrow {
				color: #999;
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
}

.logout-btn {
	background-color: #ff4d4f;
	color: #fff;
	border-radius: 45rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
}

@keyframes skeleton-loading {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
</style> 